<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="laravel-dusk" tabindex="-1"><a class="header-anchor" href="#laravel-dusk"><span>Laravel Dusk</span></a></h2>
<ul>
<li><a href="#introduction">介绍</a></li>
<li><a href="#installation">安装</a>
<ul>
<li><a href="#managing-chromedriver-installations">管理 Chromedriver 安装</a></li>
<li><a href="#using-other-browsers">使用其他浏览器</a></li>
</ul>
</li>
<li><a href="#getting-started">开始使用</a>
<ul>
<li><a href="#generating-tests">创建测试</a></li>
<li><a href="#running-tests">运行测试</a></li>
<li><a href="#environment-handling">环境处理</a></li>
<li><a href="#creating-browsers">创建浏览器</a></li>
<li><a href="#browser-macros">浏览器宏</a></li>
<li><a href="#authentication">用户认证</a></li>
<li><a href="#migrations">数据库迁移</a></li>
</ul>
</li>
<li><a href="#interacting-with-elements">与元素交互</a>
<ul>
<li><a href="#dusk-selectors">Dusk 选择器</a></li>
<li><a href="#clicking-links">点击链接</a></li>
<li><a href="#text-values-and-attributes">文本、值和属性</a></li>
<li><a href="#using-forms">使用表单</a></li>
<li><a href="#attaching-files">附加文件</a></li>
<li><a href="#using-the-keyboard">使用键盘</a></li>
<li><a href="#using-the-mouse">使用鼠标</a></li>
<li><a href="#javascript-dialogs">JavaScript 对话框</a></li>
<li><a href="#scoping-selectors">作用域选择</a></li>
<li><a href="#waiting-for-elements">等待元素</a></li>
<li><a href="#making-vue-assertions">Vue 组件断言</a></li>
</ul>
</li>
<li><a href="#available-assertions">可用的断言</a></li>
<li><a href="#pages">页面</a>
<ul>
<li><a href="#generating-pages">创建页面</a></li>
<li><a href="#configuring-pages">配置页面</a></li>
<li><a href="#navigating-to-pages">导航至页面</a></li>
<li><a href="#shorthand-selectors">简写选择器</a></li>
<li><a href="#page-methods">页面方法</a></li>
</ul>
</li>
<li><a href="#components">组件</a>
<ul>
<li><a href="#generating-components">创建组件</a></li>
<li><a href="#using-components">使用组件</a></li>
</ul>
</li>
<li><a href="#continuous-integration">持续集成</a>
<ul>
<li><a href="#running-tests-on-circle-ci">CircleCI</a></li>
<li><a href="#running-tests-on-codeship">Codeship</a></li>
<li><a href="#running-tests-on-heroku-ci">Heroku CI</a></li>
<li><a href="#running-tests-on-travis-ci">Travis CI</a></li>
<li><a href="#running-tests-on-github-actions">GitHub Actions</a></li>
</ul>
</li>
</ul>
<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍"><span>介绍</span></a></h2>
<p>Laravel Dusk 提供了富有表现力、简单易用的浏览器自动化及测试 API 。默认情况下，Dusk 不需要在你的机器上安装 JDK 或者 Selenium 。而是需要使用单独的 <a href="https://sites.google.com/a/chromium.org/chromedriver/home" target="_blank" rel="noopener noreferrer">ChromeDriver</a> 进行安装。当然，你也可以自由使用其他的兼容 Selenium 的驱动程序。</p>
<h2 id="安装" tabindex="-1"><a class="header-anchor" href="#安装"><span>安装</span></a></h2>
<p>你应该先向你的 Composer 添加 <code v-pre>laravel/dusk</code> 依赖 ：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">composer <span class="token keyword">require</span> <span class="token operator">--</span>dev laravel<span class="token operator">/</span>dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>注意：如果你是手动注册 Dusk 服务提供者，一定 <strong>不能</strong> 在你的生产环境中注册，这样可能会导致一些不守规矩的用户拥有控制你应用的权限。</p>
</blockquote>
<p>安装好 Dusk 包后，运行 <code v-pre>dusk:install</code> 命令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan dusk<span class="token punctuation">:</span>install</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>Browser</code> 目录将会在 <code v-pre>tests</code> 目录下被创建，并且包含一个测试用例。接下来，在你的 <code v-pre>.env</code> 文件中设置 <code v-pre>APP_URL</code> 变量。这个值应该与你在浏览器中打开本应用的 URL 匹配。</p>
<p>要运行测试，使用 <code v-pre>dusk</code> 命令。 <code v-pre>dusk</code> 命令可以使用与 <code v-pre>phpunit</code> 命令同样的参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果上次运行 <code v-pre>dusk</code> 命令时测试失败，则可以通过使用 <code v-pre>dusk:fails</code> 命令重新运行失败的测试来节省时间：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan dusk<span class="token punctuation">:</span>fails</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="管理-chromedriver-安装" tabindex="-1"><a class="header-anchor" href="#管理-chromedriver-安装"><span>管理 ChromeDriver 安装</span></a></h3>
<p>如果您想安装与 Laravel Dusk 附带版本不同的 ChromeDriver，可以使用 <code v-pre>dusk:chrome driver</code> 命令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment"># 为您的操作系统安装最新版本的 ChromeDriver...</span></span>
<span class="line">php artisan dusk<span class="token punctuation">:</span>chrome<span class="token operator">-</span>driver</span>
<span class="line"></span>
<span class="line"><span class="token comment"># 为您的操作系统安装指定版本的 ChromeDriver...</span></span>
<span class="line">php artisan dusk<span class="token punctuation">:</span>chrome<span class="token operator">-</span>driver <span class="token number">74</span></span>
<span class="line"></span>
<span class="line"><span class="token comment"># 为所有支持的操作系统安装指定版本的 ChromeDriver...</span></span>
<span class="line">php artisan dusk<span class="token punctuation">:</span>chrome<span class="token operator">-</span>driver <span class="token operator">--</span>all</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>{注意} Dusk 要求 <a href="https://sites.google.com/a/chromium.org/chromedriver/home" target="_blank" rel="noopener noreferrer">ChromeDriver</a> 二进制文件是可执行的。如果在 Dusk 运行时遇到问题，可以使用以下命令确保二进制文件是可执行的：<code v-pre>chmod -R 0755 vendor/laravel/dusk/bin</code>。</p>
</blockquote>
<h3 id="使用其他浏览器" tabindex="-1"><a class="header-anchor" href="#使用其他浏览器"><span>使用其他浏览器</span></a></h3>
<p>默认情况下， Dusk 使用 Google Chrome 浏览器和一个单独的 <a href="https://sites.google.com/a/chromium.org/chromedriver/home" target="_blank" rel="noopener noreferrer">ChromeDriver</a> 的安装来运行你的浏览器测试。当然，你可以运行你自己的 Selenium 服务，用任何你想用的浏览器来进行测试。</p>
<p>如果要这么做，打开 <code v-pre>tests/DuskTestCase.php</code> 文件，这个是应用测试用例的基类。在这个文件中，你可以移除对 <code v-pre>startChromeDriver</code> 方法的调用。这样 Dusk 就不会自动启动 ChromeDriver 了。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 准备执行 Dusk 测试。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@beforeClass</span></span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function-definition function">prepare</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// static::startChromeDriver();</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，你可以修改 <code v-pre>driver</code> 方法来连接到你选定的 URL 和端口。此外，你可以修改 「desired capabilities」（期望能力），它将会被传递给 WebDriver：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 创建 RemoteWebDriver 实例。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token punctuation">\</span>Facebook<span class="token punctuation">\</span>WebDriver<span class="token punctuation">\</span>Remote<span class="token punctuation">\</span>RemoteWebDriver</span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">driver</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">RemoteWebDriver</span><span class="token operator">::</span><span class="token function">create</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token string single-quoted-string">'http://localhost:4444/wd/hub'</span><span class="token punctuation">,</span> <span class="token class-name static-context">DesiredCapabilities</span><span class="token operator">::</span><span class="token function">phantomjs</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="开始使用" tabindex="-1"><a class="header-anchor" href="#开始使用"><span>开始使用</span></a></h2>
<h3 id="创建测试" tabindex="-1"><a class="header-anchor" href="#创建测试"><span>创建测试</span></a></h3>
<p>要创建一个 Dusk 测试，使用 <code v-pre>dusk:make</code> 命令。创建的测试将会被放在 <code v-pre>tests/Browser</code> 目录：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    php artisan dusk<span class="token punctuation">:</span>make LoginTest</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="运行测试" tabindex="-1"><a class="header-anchor" href="#运行测试"><span>运行测试</span></a></h3>
<p>使用<code v-pre>dusk</code> Artisan 命令来运行你的浏览器测试：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    php artisan dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果上次运行 <code v-pre>dusk</code> 命令时测试失败，则可以通过使用 <code v-pre>dusk:fails</code> 命令重新运行失败的测试来节省时间：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    php artisan dusk<span class="token punctuation">:</span>fails</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>dusk</code> 命令接受任何能让 PHPUnit 正常运行的参数。例如，让你可以在指定 <a href="https://phpunit.de/manual/current/en/appendixes.annotations.html#appendixes.annotations.group" target="_blank" rel="noopener noreferrer">group</a> 中运行测试：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    php artisan dusk <span class="token operator">--</span>group<span class="token operator">=</span>foo</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="手动运行-chromedriver" tabindex="-1"><a class="header-anchor" href="#手动运行-chromedriver"><span>手动运行 ChromeDriver</span></a></h4>
<p>默认情况下，Dusk 会尝试自动运行 ChromeDriver。如果你在特定的系统中不能运行，可以在运行 <code v-pre>dusk</code> 命令前通过手动的方式来运行 ChromeDriver。 如果你选择手动运行 ChromeDriver，你需要在你的 <code v-pre>tests/DuskTestCase.php</code>文件中注释掉下面这一行：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 为 Dusk 测试做准备。</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@beforeClass</span></span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function-definition function">prepare</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// static::startChromeDriver();</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>另外，如果你的 ChromeDriver 运行在非 9515 端口 ，你需要修改同一个类中的 <code v-pre>driver</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 创建 RemoteWebDriver 实例。</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token punctuation">\</span>Facebook<span class="token punctuation">\</span>WebDriver<span class="token punctuation">\</span>Remote<span class="token punctuation">\</span>RemoteWebDriver</span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">driver</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">RemoteWebDriver</span><span class="token operator">::</span><span class="token function">create</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token string single-quoted-string">'http://localhost:9515'</span><span class="token punctuation">,</span> <span class="token class-name static-context">DesiredCapabilities</span><span class="token operator">::</span><span class="token function">chrome</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="环境处理" tabindex="-1"><a class="header-anchor" href="#环境处理"><span>环境处理</span></a></h3>
<p>为了让 Dusk 使用自己的环境文件来运行测试，你需要在项目根目录创建一个 <code v-pre>.env.dusk.{environment}</code> 文件。简单的说，如果你想用 <code v-pre>local</code> 环境来运行 <code v-pre>dusk</code> 命令，你需要创建一个 <code v-pre>.env.dusk.local</code> 文件。</p>
<p>运行测试的时候，Dusk 会备份你的 <code v-pre>.env</code> 文件并且重命名你的 Dusk 环境文件为 <code v-pre>.env</code>。当测试结束后，它会恢复你的 <code v-pre>.env</code> 文件。</p>
<h3 id="创建浏览器" tabindex="-1"><a class="header-anchor" href="#创建浏览器"><span>创建浏览器</span></a></h3>
<p>让我们先来写一个测试用例，这个例子可以验证我们是否能够登录系统。生成测试例子之后，我们可以修改它并让它可以跳转到登录界面，输入登录信息之后，点击「登录」按钮。我们通过 <code v-pre>browse</code> 方法来创建一个浏览器实例：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>DuskTestCase</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Chrome</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Testing<span class="token punctuation">\</span>DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">class</span> <span class="token class-name-definition class-name">ExampleTest</span> <span class="token keyword">extends</span> <span class="token class-name">DuskTestCase</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">use</span> <span class="token package">DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token doc-comment comment">/**</span>
<span class="line">         * 一个基础的浏览器测试用例</span>
<span class="line">         *</span>
<span class="line">         * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">         */</span></span>
<span class="line">        <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">testBasicExample</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$user</span> <span class="token operator">=</span> <span class="token function">factory</span><span class="token punctuation">(</span><span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">                <span class="token string single-quoted-string">'email'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'taylor@laravel.com'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/login'</span><span class="token punctuation">)</span></span>
<span class="line">                        <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">,</span> <span class="token variable">$user</span><span class="token operator">-></span><span class="token property">email</span><span class="token punctuation">)</span></span>
<span class="line">                        <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'password'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'password'</span><span class="token punctuation">)</span></span>
<span class="line">                        <span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Login'</span><span class="token punctuation">)</span></span>
<span class="line">                        <span class="token operator">-></span><span class="token function">assertPathIs</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在上面的例子中，<code v-pre>browse</code> 方法接收了一个回调参数。Dusk 会自动将这个浏览器实例注入到回调过程中，而且这个浏览器实例可以和你的应用进行交互和断言。</p>
<h4 id="创建多个浏览器" tabindex="-1"><a class="header-anchor" href="#创建多个浏览器"><span>创建多个浏览器</span></a></h4>
<p>有时候你可能需要多个浏览器才能正确的进行测试。例如，使用多个浏览器测试通过 websockets 进行通讯的在线聊天页面。想要创建多个浏览器，需要在 <code v-pre>browse</code> 方法的回调中，用名字来区分浏览器实例，然后传给回调去「申请」多个浏览器实例：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$first</span><span class="token punctuation">,</span> <span class="token variable">$second</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$first</span><span class="token operator">-></span><span class="token function">loginAs</span><span class="token punctuation">(</span><span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">              <span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span></span>
<span class="line">              <span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Message'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$second</span><span class="token operator">-></span><span class="token function">loginAs</span><span class="token punctuation">(</span><span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">               <span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span></span>
<span class="line">               <span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Message'</span><span class="token punctuation">)</span></span>
<span class="line">               <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'message'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Hey Taylor'</span><span class="token punctuation">)</span></span>
<span class="line">               <span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Send'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$first</span><span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hey Taylor'</span><span class="token punctuation">)</span></span>
<span class="line">              <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Jeffrey Way'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="改变浏览器窗口大小" tabindex="-1"><a class="header-anchor" href="#改变浏览器窗口大小"><span>改变浏览器窗口大小</span></a></h4>
<p>你可以使用 <code v-pre>resize</code> 方法去调整浏览器的窗口大小：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">resize</span><span class="token punctuation">(</span><span class="token number">1920</span><span class="token punctuation">,</span> <span class="token number">1080</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>maximize</code> 方法可以将浏览器窗口最大化：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">maximize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="浏览器宏" tabindex="-1"><a class="header-anchor" href="#浏览器宏"><span>浏览器宏</span></a></h3>
<p>如果你想定义一个可以在各种测试中重复使用的自定义浏览器方法，可以在 <code v-pre>Browser</code> 类中使用 <code v-pre>macro</code> 方法。通常，你应该从 <a href="https://learnku.com/docs/laravel/6.x/providers" target="_blank" rel="noopener noreferrer">服务提供者</a> 的 <code v-pre>boot</code> 方法中调用它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Providers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>ServiceProvider</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">class</span> <span class="token class-name-definition class-name">DuskServiceProvider</span> <span class="token keyword">extends</span> <span class="token class-name">ServiceProvider</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token doc-comment comment">/**</span>
<span class="line">         *  注册Dusk的浏览器宏。</span>
<span class="line">         *</span>
<span class="line">         * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">         */</span></span>
<span class="line">        <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token class-name static-context">Browser</span><span class="token operator">::</span><span class="token function">macro</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'scrollToElement'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$element</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"$('html, body').animate({ scrollTop: $('<span class="token interpolation"><span class="token variable">$element</span></span>').offset().top }, 0);"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>macro</code> 方法接收一个名称作为第一个参数，第二个参数则是一个闭包。 当调用浏览器宏作为一个 <code v-pre>Browser</code> 的实现的方法时，浏览器宏的闭包将会执行：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/pay'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">scrollToElement</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#credit-card-details'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Enter Credit Card Details'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="认证" tabindex="-1"><a class="header-anchor" href="#认证"><span>认证</span></a></h3>
<p>你可能经常会测试一些需要认证的页面。你可以使用 Dusk 的 <code v-pre>loginAs</code> 方法来避免每个测试都去登陆页面登陆一次。 <code v-pre>loginAs</code> 可以使用用户 ID 或者用户模型实例：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$first</span><span class="token punctuation">,</span> <span class="token variable">$second</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$first</span><span class="token operator">-></span><span class="token function">loginAs</span><span class="token punctuation">(</span><span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">              <span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>注意：使用 <code v-pre>loginAs</code> 方法后，该用户的 session 将会持久化的供其他测试用例使用。</p>
</blockquote>
<h3 id="数据库迁移" tabindex="-1"><a class="header-anchor" href="#数据库迁移"><span>数据库迁移</span></a></h3>
<p>就像上面的认证例子一样，当你的测试用例需要迁移的时候，你不应该使用 <code v-pre>RefreshDatabase</code> trait。 <code v-pre>RefreshDatabase</code> trait 使用了不适用于 HTTP 请求的数据库事务。取而代之，我们要用 <code v-pre>DatabaseMigrations</code>trait：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>DuskTestCase</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Chrome</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Testing<span class="token punctuation">\</span>DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">class</span> <span class="token class-name-definition class-name">ExampleTest</span> <span class="token keyword">extends</span> <span class="token class-name">DuskTestCase</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">use</span> <span class="token package">DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="与元素交互" tabindex="-1"><a class="header-anchor" href="#与元素交互"><span>与元素交互</span></a></h2>
<h3 id="dusk-选择器" tabindex="-1"><a class="header-anchor" href="#dusk-选择器"><span>Dusk 选择器</span></a></h3>
<p>选择一个好的 CSS 选择器用于元素交互是编写 Dush 测试最困难的部分之一。随着时间推移，前端的更改可能会导致类似以下的 CSS 选择器中断测试：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token comment">// HTML...</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>button<span class="token operator">></span>Login<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// Test...</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.login-page .container div > button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Dusk 选择器让你专注于编写有效的测试，而不是去记忆 CSS 选择器。要定义一个选择器，只需在你的 HTML 元素中添加一个 <code v-pre>dusk</code> 属性。然后，在选择器前面添加 <code v-pre>@</code> 去操作 Dusk 测试中的附加元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token comment">// HTML...</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>button dusk<span class="token operator">=</span><span class="token string double-quoted-string">"login-button"</span><span class="token operator">></span>Login<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// Test...</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@login-button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="点击链接" tabindex="-1"><a class="header-anchor" href="#点击链接"><span>点击链接</span></a></h3>
<p>要点击链接的话，你可以在浏览器实例上使用 clickLink 方法。clickLink 方法将会点击指定显示文本的链接：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">clickLink</span><span class="token punctuation">(</span><span class="token variable">$linkText</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>注意：这个方法可以与 jQuery 进行交互。如果页面上没有 jQuery，Dusk 会自动将其注入页面，保证在测试的期间可用。</p>
</blockquote>
<h3 id="文本、值和属性" tabindex="-1"><a class="header-anchor" href="#文本、值和属性"><span>文本、值和属性</span></a></h3>
<h4 id="检索和设置值" tabindex="-1"><a class="header-anchor" href="#检索和设置值"><span>检索和设置值</span></a></h4>
<p>Dusk 提供了几种与当前显示文本，值和属性进行交互的方法。例如，要获取与指定选择器匹配的元素的「值」，请使用 <code v-pre>value</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token comment">// 检索值...</span></span>
<span class="line">    <span class="token variable">$value</span> <span class="token operator">=</span> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">value</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 设置值...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">value</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="检索文本" tabindex="-1"><a class="header-anchor" href="#检索文本"><span>检索文本</span></a></h4>
<p><code v-pre>text</code> 这个方法可以用来匹配指定选择器中元素的显示文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$text</span> <span class="token operator">=</span> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="检索属性" tabindex="-1"><a class="header-anchor" href="#检索属性"><span>检索属性</span></a></h4>
<p>最后，<code v-pre>attribute</code> 这个方法 可以用来匹配指定选择器中元素的属性：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$attribute</span> <span class="token operator">=</span> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">attribute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="表单的使用" tabindex="-1"><a class="header-anchor" href="#表单的使用"><span>表单的使用</span></a></h3>
<h4 id="输入值" tabindex="-1"><a class="header-anchor" href="#输入值"><span>输入值</span></a></h4>
<p>Dusk 提供了与表单和 input 元素交互的各种方法。首先让我们看一个在 input 框中输入文本的例子：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'taylor@laravel.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>注意， 虽然 <code v-pre>type</code> 方法可以传递 CSS 选择器做为一个参数，但这并不是强制要求的。如果没有提供 CSS 选择器， Dusk 会搜索与 <code v-pre>name</code> 属性相同的 input 。如果还是没有找到，Dusk 会尝试查找传入值与 <code v-pre>name</code> 属性相同的 <code v-pre>textarea</code> 。</p>
<p>要想将文本附加到一个字段之后而且不清除其内容， 你可以使用 <code v-pre>append</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">', bar, baz'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用 clear 方法清除输入值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="下拉菜单" tabindex="-1"><a class="header-anchor" href="#下拉菜单"><span>下拉菜单</span></a></h4>
<p>需要在下拉菜单中选择值，你可以使用 <code v-pre>select</code> 方法。 类似于 <code v-pre>type</code> 方法， <code v-pre>select</code> 方法并不是一定要传入 CSS 选择器。 当使用 <code v-pre>select</code> 方法时，你应该传递选项实际的值而不是它的显示文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'size'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Large'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你也可以通过省略第二个参数来随机选择一个选项：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'size'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="复选框" tabindex="-1"><a class="header-anchor" href="#复选框"><span>复选框</span></a></h4>
<p>使用「check」 复选框时，你可以使用 <code v-pre>check</code> 方法。 像其他许多与input 相关的方法，并不是必须传入 CSS 选择器。 如果准确的选择器无法找到的时候，Dusk 会搜索能够与 <code v-pre>name</code> 属性匹配的复选框：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'terms'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">uncheck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'terms'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="单选按钮" tabindex="-1"><a class="header-anchor" href="#单选按钮"><span>单选按钮</span></a></h4>
<p>使用 「select」中单选按钮选项时，你可以使用 <code v-pre>radio</code> 这个方法。 像很多其他的与输入相关的方法一样， 它也并不是必须传入 CSS 选择器。如果准确的选择器无法被找到的时候， Dusk 会搜索能够与 <code v-pre>name</code> 属性或者 <code v-pre>value</code> 属性相匹配的单选按钮：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">radio</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'version'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'php7'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="附件" tabindex="-1"><a class="header-anchor" href="#附件"><span>附件</span></a></h3>
<p><code v-pre>attach</code> 方法可以附加一个文件到 <code v-pre>file</code> input 元素中。 像很多其他的与输入相关的方法一样，他也并不是必须传入CSS 选择器。如果准确的选择器没有被找到的时候， Dusk 会搜索与 <code v-pre>name</code> 属性匹配的文件输入框：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">attach</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'photo'</span><span class="token punctuation">,</span> <span class="token constant">__DIR__</span><span class="token operator">.</span><span class="token string single-quoted-string">'/photos/me.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>{注意} attach 方法需要使用 PHP <code v-pre>Zip</code> 扩展，你的服务器必须安装了此扩展。</p>
</blockquote>
<h3 id="使用键盘" tabindex="-1"><a class="header-anchor" href="#使用键盘"><span>使用键盘</span></a></h3>
<p><code v-pre>keys</code> 方法让你可以再指定元素中输入比 <code v-pre>type</code> 方法更加复杂的输入序列。例如，你可以在输入值的同时按下按键。在这个例子中, 输入 <code v-pre>taylor</code> 时， <code v-pre>shift</code> 键也同时被按下。当 <code v-pre>taylor</code> 输入完之后， 将会输入 <code v-pre>otwell</code> 而不会按下任何按键：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'{shift}'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'taylor'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'otwell'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你甚至可以在你的应用中选中某个元素之后按下「快捷键」：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.app'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'{command}'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'j'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>{提示} 所有包在 <code v-pre>{}</code> 中的键盘按键， 都对应定义于 <code v-pre>Facebook\WebDriver\WebDriverKeys</code> 类中，你可以在 <a href="https://github.com/facebook/php-webdriver/blob/community/lib/WebDriverKeys.php" target="_blank" rel="noopener noreferrer">GitHub</a> 中找到。</p>
</blockquote>
<h3 id="使用鼠标" tabindex="-1"><a class="header-anchor" href="#使用鼠标"><span>使用鼠标</span></a></h3>
<h4 id="点击元素" tabindex="-1"><a class="header-anchor" href="#点击元素"><span>点击元素</span></a></h4>
<p><code v-pre>click</code> 方法可用于「点击」与给定选择器匹配的元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="鼠标悬停" tabindex="-1"><a class="header-anchor" href="#鼠标悬停"><span>鼠标悬停</span></a></h4>
<p><code v-pre>mouseover</code> 方法可用于与给定选择器匹配的元素的鼠标悬停动作：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">mouseover</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="拖放" tabindex="-1"><a class="header-anchor" href="#拖放"><span>拖放</span></a></h4>
<p><code v-pre>drag</code> 方法用于将与指定选择器匹配的元素拖到其它元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">drag</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.from-selector'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'.to-selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>或者，可以在单一方向上拖动元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragLeft</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragRight</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragUp</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragDown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="javascript-对话框" tabindex="-1"><a class="header-anchor" href="#javascript-对话框"><span>JavaScript 对话框</span></a></h3>
<p>Dusk 提供了几种与 JavaScript 对话框交互的方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">  <span class="token comment">// 等待对话框显示：</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForDialog</span><span class="token punctuation">(</span><span class="token variable">$seconds</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 断言对话框已经显示，并且其消息与给定值匹配：</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDialogOpened</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 在打开的 JavaScript 提示对话框中输入给定值：</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">typeInDialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>通过点击确定按钮关闭打开的 JavaScript 对话框：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">acceptDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>通过点击取消按钮关闭打开的 JavaScript 对话框（仅对确认对话框有效）：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dismissDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="选择器作用范围" tabindex="-1"><a class="header-anchor" href="#选择器作用范围"><span>选择器作用范围</span></a></h3>
<p>有时可能希望在给定的选择器范围内执行多个操作。比如，可能想要断言表格中存在某些文本，然后点击表格中的一个按钮。可以使用 <code v-pre>with</code> 方法实现此需求。回调函数内所有被执行的操作都被限定在原始的选择器上：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">   <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.table'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span></span>
<span class="line">              <span class="token operator">-></span><span class="token function">clickLink</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Delete'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="等待元素" tabindex="-1"><a class="header-anchor" href="#等待元素"><span>等待元素</span></a></h3>
<p>在测试大面积使用 JavaScript 的应用时，在进行测试之前，经常需要「等待」指定元素或数据可用。Dusk 使之更容易。使用一系列方法，可以等到页面元素可用，甚至给定的 JavaScript 表达式执行结果为 <code v-pre>true</code>。</p>
<h4 id="等待" tabindex="-1"><a class="header-anchor" href="#等待"><span>等待</span></a></h4>
<p>如果需要测试暂停指定的毫秒数，可以使用 <code v-pre>pause</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="等待选择器" tabindex="-1"><a class="header-anchor" href="#等待选择器"><span>等待选择器</span></a></h4>
<p><code v-pre>waitFor</code> 方法可以用于暂停执行测试，直到页面上与给定 CSS 选择器匹配的元素被显示。默认情况下，将在暂停超过 5 秒后抛出异常。如果有必要，可以传递自定义超时时长作为其第二个参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token comment">// 等待选择器 5 秒时间...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitFor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 等待选择器 1 秒时间...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitFor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>还可以等待指定选择器从页面消失：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilMissing</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilMissing</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="选择器可用时限定作用域范围" tabindex="-1"><a class="header-anchor" href="#选择器可用时限定作用域范围"><span>选择器可用时限定作用域范围</span></a></h4>
<p>偶尔可能希望等待选择器然后与其互动。例如，可能希望等待模态窗口可用，然后点击模态窗口的「确定」按钮。 <code v-pre>whenAvailable</code> 方法能够用于这种情况。给定回调内的所有要执行的元素操作都将被限定在起始选择器上：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">whenAvailable</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.modal'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$modal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span></span>
<span class="line">              <span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'OK'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>v</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待文本" tabindex="-1"><a class="header-anchor" href="#等待文本"><span>等待文本</span></a></h4>
<p><code v-pre>waitForText</code> 方法可以用于等待页面上给定文字被显示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token comment">// 等待指定文本 5 秒时间...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 等待指定文本 1 秒时间...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待链接" tabindex="-1"><a class="header-anchor" href="#等待链接"><span>等待链接</span></a></h4>
<p><code v-pre>waitForLink</code> 方法用于等待给定链接文字在页面上显示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token comment">// 等待指定链接 5 秒时间...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForLink</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Create'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">//等待给定链接 1 秒时间...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForLink</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Create'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待页面跳转" tabindex="-1"><a class="header-anchor" href="#等待页面跳转"><span>等待页面跳转</span></a></h4>
<p>在给出类似 <code v-pre>$browser-&gt;assertPathIs('/home')</code> 路径断言时，如果 <code v-pre>window.location.pathname</code> 被异步更新，断言就会失败。可以使用 <code v-pre>waitForLocation</code> 方法等待页面跳转到给定路径：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForLocation</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/secret'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>还可以等待被命名的路由跳转：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForRoute</span><span class="token punctuation">(</span><span class="token variable">$routeName</span><span class="token punctuation">,</span> <span class="token variable">$parameters</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="等待页面重新加载" tabindex="-1"><a class="header-anchor" href="#等待页面重新加载"><span>等待页面重新加载</span></a></h4>
<p>如果要在页面重新加载后断言，可以使用 <code v-pre>waitForReload</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.some-action'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">waitForReload</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'something'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待-javascript-表达式" tabindex="-1"><a class="header-anchor" href="#等待-javascript-表达式"><span>等待 JavaScript 表达式</span></a></h4>
<p>有时会希望暂停执行测试，直到给定的 JavaScript 表达式执行结果为 <code v-pre>true</code>。可以使用 <code v-pre>waitUntil</code> 方法轻易地达成此目的。传送一个表达式给此方法，不需要包含 <code v-pre>return</code> 关键字或者结束分号：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token comment">// 等待表达式为 true 5 秒时间...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntil</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'App.dataLoaded'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntil</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'App.data.servers.length > 0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 等待表达式为 true 1 秒时间...</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntil</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'App.data.servers.length > 0'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待-vue-表达式" tabindex="-1"><a class="header-anchor" href="#等待-vue-表达式"><span>等待 Vue 表达式</span></a></h4>
<p>下述方法可用于一直等待，直到一个给定的 Vue 组件属性有特定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 一直等待，直到组件属性有特定的值</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilVue</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user.name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Taylor'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'@user'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 一直等待，直到组件不包含给定的值</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilVueIsNot</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user.name'</span><span class="token punctuation">,</span> <span class="token constant">null</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'@user'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="使用回调函数来等待" tabindex="-1"><a class="header-anchor" href="#使用回调函数来等待"><span>使用回调函数来等待</span></a></h4>
<p>Dusk 中的许多 &quot;wait&quot; 方法都依赖于底层方法 <code v-pre>waitUsing</code>。你可以直接用这个方法去等待一个回调函数返回 <code v-pre>true</code>。<code v-pre>waitUsing</code> 方法接收一个最大的等待秒数，闭包执行的内部时间，闭包，以及一个可选的失败信息：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUsing</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$something</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$something</span><span class="token operator">-></span><span class="token function">isReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string double-quoted-string">"Something wasn't ready in time."</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="创建-vue-断言" tabindex="-1"><a class="header-anchor" href="#创建-vue-断言"><span>创建 Vue 断言</span></a></h3>
<p>Dusk 甚至还允许你对 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue</a> 组件数据的状态进行断言。比如：假设你的应用有如下的 Vue 组件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// HTML...</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>profile dusk<span class="token operator">=</span><span class="token string double-quoted-string">"profile-component"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>profile<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 组件的定义</span></span>
<span class="line"></span>
<span class="line">Vue<span class="token operator">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'profile'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    template<span class="token punctuation">:</span> <span class="token string single-quoted-string">'&lt;div>{{ user.name }}&lt;/div>'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token argument-name">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line">            user<span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">              name<span class="token punctuation">:</span> <span class="token string single-quoted-string">'Taylor'</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以像这样对 Vue 组件状态进行断言：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 一个基础的 Vue 测试示例</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">testVue</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">assertVue</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user.name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Taylor'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'@profile-component'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="可用的断言" tabindex="-1"><a class="header-anchor" href="#可用的断言"><span>可用的断言</span></a></h2>
<p>Dusk 提供了各种你可以对应用使用的断言。所有可用的断言列表如下：</p>
<h4 id="asserttitle" tabindex="-1"><a class="header-anchor" href="#asserttitle"><span>assertTitle</span></a></h4>
<p>断言页面的标题（title）为给定值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertTitle</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserttitlecontains" tabindex="-1"><a class="header-anchor" href="#asserttitlecontains"><span>assertTitleContains</span></a></h4>
<p>断言页面标题（title）包含给定值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertTitleContains</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserturlis" tabindex="-1"><a class="header-anchor" href="#asserturlis"><span>assertUrlIs</span></a></h4>
<p>断言当前的 URL（不包含 query 字符串）满足给定的字符串：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertUrlIs</span><span class="token punctuation">(</span><span class="token variable">$url</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertschemeis" tabindex="-1"><a class="header-anchor" href="#assertschemeis"><span>assertSchemeIs</span></a></h4>
<p>断言当前的 URL scheme 满足给定的 scheme：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSchemeIs</span><span class="token punctuation">(</span><span class="token variable">$scheme</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertschemeisnot" tabindex="-1"><a class="header-anchor" href="#assertschemeisnot"><span>assertSchemeIsNot</span></a></h4>
<p>断言当前的 URL scheme 不满足给定的 scheme：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSchemeIsNot</span><span class="token punctuation">(</span><span class="token variable">$scheme</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserthostis" tabindex="-1"><a class="header-anchor" href="#asserthostis"><span>assertHostIs</span></a></h4>
<p>断言当前的 URL host 满足给定的 host：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertHostIs</span><span class="token punctuation">(</span><span class="token variable">$host</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserthostisnot" tabindex="-1"><a class="header-anchor" href="#asserthostisnot"><span>assertHostIsNot</span></a></h4>
<p>断言当前的 URL host 不满足给定的 host：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertHostIsNot</span><span class="token punctuation">(</span><span class="token variable">$host</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertportis" tabindex="-1"><a class="header-anchor" href="#assertportis"><span>assertPortIs</span></a></h4>
<p>断言当前的 URL 端口满足给定的端口：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPortIs</span><span class="token punctuation">(</span><span class="token variable">$port</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertportisnot" tabindex="-1"><a class="header-anchor" href="#assertportisnot"><span>assertPortIsNot</span></a></h4>
<p>断言当前的 URL 端口不满足给定的端口：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPortIsNot</span><span class="token punctuation">(</span><span class="token variable">$port</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertpathbeginswith" tabindex="-1"><a class="header-anchor" href="#assertpathbeginswith"><span>assertPathBeginsWith</span></a></h4>
<p>断言当前的 URL 以给定的字符串开头：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPathBeginsWith</span><span class="token punctuation">(</span><span class="token variable">$path</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertpathis" tabindex="-1"><a class="header-anchor" href="#assertpathis"><span>assertPathIs</span></a></h4>
<p>断言当前的路径满足给定的路径：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPathIs</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertpathisnot" tabindex="-1"><a class="header-anchor" href="#assertpathisnot"><span>assertPathIsNot</span></a></h4>
<p>断言当前的路径不满足给定的路径：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPathIsNot</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertrouteis" tabindex="-1"><a class="header-anchor" href="#assertrouteis"><span>assertRouteIs</span></a></h4>
<p>断言给定的 URL 不满足给定的命名路由的 URL：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertRouteIs</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$parameters</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertquerystringhas" tabindex="-1"><a class="header-anchor" href="#assertquerystringhas"><span>assertQueryStringHas</span></a></h4>
<p>断言给定的 query 参数存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertQueryStringHas</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>断言给定的 query 参数存在，并且是给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertQueryStringHas</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertquerystringmissing" tabindex="-1"><a class="header-anchor" href="#assertquerystringmissing"><span>assertQueryStringMissing</span></a></h4>
<p>断言给定的 query 参数不存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertQueryStringMissing</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertfragmentis" tabindex="-1"><a class="header-anchor" href="#assertfragmentis"><span>assertFragmentIs</span></a></h4>
<p>断言当前的 fragment 满足给定的 fragment：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertFragmentIs</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'anchor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertfragmentbeginswith" tabindex="-1"><a class="header-anchor" href="#assertfragmentbeginswith"><span>assertFragmentBeginsWith</span></a></h4>
<p>断言当前的 fragment 以给定的 fragment 开头：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertFragmentBeginsWith</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'anchor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertfragmentisnot" tabindex="-1"><a class="header-anchor" href="#assertfragmentisnot"><span>assertFragmentIsNot</span></a></h4>
<p>断言当前的 fragment 不满足给定的 fragment：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertFragmentIsNot</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'anchor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserthascookie" tabindex="-1"><a class="header-anchor" href="#asserthascookie"><span>assertHasCookie</span></a></h4>
<p>断言给定的 cookie 存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertHasCookie</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertcookiemissing" tabindex="-1"><a class="header-anchor" href="#assertcookiemissing"><span>assertCookieMissing</span></a></h4>
<p>断言给定的 cookie 不存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertCookieMissing</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertcookievalue" tabindex="-1"><a class="header-anchor" href="#assertcookievalue"><span>assertCookieValue</span></a></h4>
<p>断言 cookie 是给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertCookieValue</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertplaincookievalue" tabindex="-1"><a class="header-anchor" href="#assertplaincookievalue"><span>assertPlainCookieValue</span></a></h4>
<p>断言未加密的 cookie 有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPlainCookieValue</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertsee" tabindex="-1"><a class="header-anchor" href="#assertsee"><span>assertSee</span></a></h4>
<p>断言在页面中有给定的文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token variable">$text</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdontsee" tabindex="-1"><a class="header-anchor" href="#assertdontsee"><span>assertDontSee</span></a></h4>
<p>断言在页面中没有给定的文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDontSee</span><span class="token punctuation">(</span><span class="token variable">$text</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertseein" tabindex="-1"><a class="header-anchor" href="#assertseein"><span>assertSeeIn</span></a></h4>
<p>断言在选择器中有给定的文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSeeIn</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$text</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>译者注：这里的选择器，应该是 DOM 选择器</p>
</blockquote>
<h4 id="assertdontseein" tabindex="-1"><a class="header-anchor" href="#assertdontseein"><span>assertDontSeeIn</span></a></h4>
<p>断言在选择器中不存在给定的字符串：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDontSeeIn</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$text</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertsourcehas" tabindex="-1"><a class="header-anchor" href="#assertsourcehas"><span>assertSourceHas</span></a></h4>
<p>断言在页面中存在给定的源码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSourceHas</span><span class="token punctuation">(</span><span class="token variable">$code</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertsourcemissing" tabindex="-1"><a class="header-anchor" href="#assertsourcemissing"><span>assertSourceMissing</span></a></h4>
<p>断言页面中没有给定的源码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSourceMissing</span><span class="token punctuation">(</span><span class="token variable">$code</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertseelink" tabindex="-1"><a class="header-anchor" href="#assertseelink"><span>assertSeeLink</span></a></h4>
<p>断言在页面中存在指定的链接：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSeeLink</span><span class="token punctuation">(</span><span class="token variable">$linkText</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdontseelink" tabindex="-1"><a class="header-anchor" href="#assertdontseelink"><span>assertDontSeeLink</span></a></h4>
<p>断言页面中没有指定的链接：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDontSeeLink</span><span class="token punctuation">(</span><span class="token variable">$linkText</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertinputvalue" tabindex="-1"><a class="header-anchor" href="#assertinputvalue"><span>assertInputValue</span></a></h4>
<p>断言输入框（input）有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertInputValue</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertinputvalueisnot" tabindex="-1"><a class="header-anchor" href="#assertinputvalueisnot"><span>assertInputValueIsNot</span></a></h4>
<p>断言输入框没有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertInputValueIsNot</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertchecked" tabindex="-1"><a class="header-anchor" href="#assertchecked"><span>assertChecked</span></a></h4>
<p>断言复选框（checkbox）被选中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertChecked</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertnotchecked" tabindex="-1"><a class="header-anchor" href="#assertnotchecked"><span>assertNotChecked</span></a></h4>
<p>断言复选框没有被选中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertNotChecked</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertradioselected" tabindex="-1"><a class="header-anchor" href="#assertradioselected"><span>assertRadioSelected</span></a></h4>
<p>断言单选框（radio）被选中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertRadioSelected</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertradionotselected" tabindex="-1"><a class="header-anchor" href="#assertradionotselected"><span>assertRadioNotSelected</span></a></h4>
<p>断言单选框没有被选中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertRadioNotSelected</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselected" tabindex="-1"><a class="header-anchor" href="#assertselected"><span>assertSelected</span></a></h4>
<p>断言下拉框有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelected</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertnotselected" tabindex="-1"><a class="header-anchor" href="#assertnotselected"><span>assertNotSelected</span></a></h4>
<p>断言下拉框没有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertNotSelected</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselecthasoptions" tabindex="-1"><a class="header-anchor" href="#assertselecthasoptions"><span>assertSelectHasOptions</span></a></h4>
<p>断言给定的数组值是可选的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelectHasOptions</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$values</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselectmissingoptions" tabindex="-1"><a class="header-anchor" href="#assertselectmissingoptions"><span>assertSelectMissingOptions</span></a></h4>
<p>断言给定的数组值是不可选的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelectMissingOptions</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$values</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselecthasoption" tabindex="-1"><a class="header-anchor" href="#assertselecthasoption"><span>assertSelectHasOption</span></a></h4>
<p>断言给定的值在给定的地方是可供选择的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelectHasOption</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvalue" tabindex="-1"><a class="header-anchor" href="#assertvalue"><span>assertValue</span></a></h4>
<p>断言选择器范围内的元素存在指定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertValue</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvisible" tabindex="-1"><a class="header-anchor" href="#assertvisible"><span>assertVisible</span></a></h4>
<p>断言选择器范围内的元素可见：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVisible</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertpresent" tabindex="-1"><a class="header-anchor" href="#assertpresent"><span>assertPresent</span></a></h4>
<p>断言选择器范围内的元素是存在的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPresent</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertmissing" tabindex="-1"><a class="header-anchor" href="#assertmissing"><span>assertMissing</span></a></h4>
<p>断言选择器范围内的元素不存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertMissing</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdialogopened" tabindex="-1"><a class="header-anchor" href="#assertdialogopened"><span>assertDialogOpened</span></a></h4>
<p>断言含有指定消息的 JavaScript 对话框已经打开：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDialogOpened</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertenabled" tabindex="-1"><a class="header-anchor" href="#assertenabled"><span>assertEnabled</span></a></h4>
<p>断言指定的字段是启用的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertEnabled</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdisabled" tabindex="-1"><a class="header-anchor" href="#assertdisabled"><span>assertDisabled</span></a></h4>
<p>断言指定的字段是停用的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDisabled</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertbuttonenabled" tabindex="-1"><a class="header-anchor" href="#assertbuttonenabled"><span>assertButtonEnabled</span></a></h4>
<p>断言指定的按钮是启用的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertButtonEnabled</span><span class="token punctuation">(</span><span class="token variable">$button</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertbuttondisabled" tabindex="-1"><a class="header-anchor" href="#assertbuttondisabled"><span>assertButtonDisabled</span></a></h4>
<p>断言指定的按钮是停用的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertButtonDisabled</span><span class="token punctuation">(</span><span class="token variable">$button</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertfocused" tabindex="-1"><a class="header-anchor" href="#assertfocused"><span>assertFocused</span></a></h4>
<p>断言焦点在于指定的字段：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertFocused</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertnotfocused" tabindex="-1"><a class="header-anchor" href="#assertnotfocused"><span>assertNotFocused</span></a></h4>
<p>断言焦点不在指定的字段：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertNotFocused</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvue" tabindex="-1"><a class="header-anchor" href="#assertvue"><span>assertVue</span></a></h4>
<p>断言 Vue 组件数据的属性匹配指定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVue</span><span class="token punctuation">(</span><span class="token variable">$property</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$componentSelector</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvueisnot" tabindex="-1"><a class="header-anchor" href="#assertvueisnot"><span>assertVueIsNot</span></a></h4>
<p>断言 Vue 组件数据的属性不匹配指定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVueIsNot</span><span class="token punctuation">(</span><span class="token variable">$property</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$componentSelector</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvuecontains" tabindex="-1"><a class="header-anchor" href="#assertvuecontains"><span>assertVueContains</span></a></h4>
<p>断言 Vue 组件数据的属性是一个数组，并且该数组包含指定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVueContains</span><span class="token punctuation">(</span><span class="token variable">$property</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$componentSelector</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvuedoesnotcontain" tabindex="-1"><a class="header-anchor" href="#assertvuedoesnotcontain"><span>assertVueDoesNotContain</span></a></h4>
<p>断言 Vue 组件数据的属性是一个数组，并且该数组不包含指定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVueDoesNotContain</span><span class="token punctuation">(</span><span class="token variable">$property</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$componentSelector</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="页面" tabindex="-1"><a class="header-anchor" href="#页面"><span>页面</span></a></h2>
<p>有时候，需要测试一系列复杂的动作，这会使得测试代码难以阅读和理解。通过页面可以定义出语义化的动作，然后在指定页面中可以使用单个方法。页面还可以定义应用或单个页面通用选择器的快捷方式。</p>
<h3 id="生成页面" tabindex="-1"><a class="header-anchor" href="#生成页面"><span>生成页面</span></a></h3>
<p><code v-pre>dusk:page</code> Artisan 命令可以生成页面对象。所有的页面对象都位于 <code v-pre>tests/Browser/Pages</code> 目录：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan dusk<span class="token punctuation">:</span>page Login</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="配置页面" tabindex="-1"><a class="header-anchor" href="#配置页面"><span>配置页面</span></a></h3>
<p>页面默认拥有 3 个方法： <code v-pre>url</code>， <code v-pre>assert</code> 和 <code v-pre>elements</code>。 在这里我们先详述 <code v-pre>url</code> 和 <code v-pre>assert</code> 方法， <code v-pre>elements</code> 方法将会 <a href="#shorthand-selectors">选择器简写</a>中详述。</p>
<h4 id="url-方法" tabindex="-1"><a class="header-anchor" href="#url-方法"><span><code v-pre>url</code> 方法</span></a></h4>
<p><code v-pre>url</code> 方法应该返回表示页面 URL 的路径。 Dusk 将会在浏览器中使用这个 URL 来导航到具体页面：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 获得页面 URL 路径。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string single-quoted-string">'/login'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="assert-方法" tabindex="-1"><a class="header-anchor" href="#assert-方法"><span><code v-pre>assert</code> 方法</span></a></h4>
<p><code v-pre>assert</code> 方法可以作出任何断言来验证浏览器是否在指定页面上。这个方法并不是必须的。你可以根据你自己的需求来做出这些断言。这些断言会在你导航到这个页面的时候自动执行：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 断言浏览器当前处于指定页面。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">assert</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPathIs</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="导航至页面" tabindex="-1"><a class="header-anchor" href="#导航至页面"><span>导航至页面</span></a></h3>
<p>一旦页面配置好之后，你可以使用 <code v-pre>visit</code> 方法导航至页面：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Pages<span class="token punctuation">\</span>Login</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Login</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>有时候，你可能已经在指定页面了，你需要的只是「加载」当前页面的选择器和方法到当前测试中来。常见的例子有：当你按下一个按钮的时候，你会被重定向至指定页面，而不是直接导航至指定页面。在这种情况下，你需要使用 <code v-pre>on</code> 方法来加载页面：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Pages<span class="token punctuation">\</span>CreatePlaylist</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/dashboard'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">clickLink</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Create Playlist'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">on</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">CreatePlaylist</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@create'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="选择器简写" tabindex="-1"><a class="header-anchor" href="#选择器简写"><span>选择器简写</span></a></h3>
<p><code v-pre>elements</code> 方法允许你为页面中的任何 CSS 选择器定义简单易记的简写。例如，让我们为应用登录页中的 email 输入框定义一个简写：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 获取页面的元素简写。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">array</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">elements</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'@email'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'input[name=email]'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在你可以用这个简写来代替之前在页面中使用的完整 CSS 选择器：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@email'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'taylor@laravel.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="全局的选择器简写" tabindex="-1"><a class="header-anchor" href="#全局的选择器简写"><span>全局的选择器简写</span></a></h4>
<p>安装 Dusk 之后，<code v-pre>Page</code> 基类存放在你的 <code v-pre>tests/Browser/Pages</code> 目录。该类中包含一个 <code v-pre>siteElements</code> 方法，这个方法可以用来定义全局的选择器简写，这样在你应用中每个页面都可以使用这些全局选择器简写了：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 获取站点全局的选择器简写。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">array</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function-definition function">siteElements</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'@element'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'#selector'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="页面方法" tabindex="-1"><a class="header-anchor" href="#页面方法"><span>页面方法</span></a></h3>
<p>除了页面中已经定义的默认方法之外，你还可以定义在整个测试过程中会使用到的其他方法。例如，假设我们正在开发一个音乐管理应用，在应用中都可能需要一个公共的方法来创建列表，而不是在每一页、每一个测试类中都重写一遍创建播放列表的逻辑，这时候你可以在你的页面类中定义一个 <code v-pre>createPlaylist</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Pages</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Dashboard</span> <span class="token keyword">extends</span> <span class="token class-name">Page</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 其他页面方法...</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 创建一个新的播放列表。</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span>  <span class="token class-name"><span class="token punctuation">\</span>Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span>  <span class="token parameter">$browser</span></span>
<span class="line">     * <span class="token keyword">@param</span>  <span class="token class-name"><span class="token keyword">string</span></span>  <span class="token parameter">$name</span></span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">createPlaylist</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">,</span> <span class="token variable">$name</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token variable">$name</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'share'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Create Playlist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>方法被定义之后，你可以在任何使用到该页的测试中使用这个方法了。浏览器实例会自动传递该页面方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Pages<span class="token punctuation">\</span>Dashboard</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Dashboard</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">createPlaylist</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'My Playlist'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'My Playlist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件" tabindex="-1"><a class="header-anchor" href="#组件"><span>组件</span></a></h2>
<p>组件类似于 Dusk 的 「页面对象」，不过它更多的是贯穿整个应用程序中频繁重用的 UI 和功能片断，比如说导航条或信息通知弹窗。因此，组件并不会绑定于某个明确的 URL。</p>
<h3 id="组件的生成" tabindex="-1"><a class="header-anchor" href="#组件的生成"><span>组件的生成</span></a></h3>
<p>为了生成一个组件，使用 Artisan 命令 <code v-pre>dusk:component</code> 即可生成组件。新生成的组件位于 <code v-pre>test/Browser/Components</code> 目录中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan dusk<span class="token punctuation">:</span>component DatePicker</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如上所示，这是生成一个 「日期选择器」（date picker） 组件的示例，这个组件可能会贯穿使用在你应用程序的许多页面中。在整个测试套件的大量测试页面中，手动编写日期选择的浏览器自动化逻辑会非常麻烦。 更方便的替代办法是，定义一个表示日期选择器的 Dusk 组件，然后把自动化逻辑封装在该组件内：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Components</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Component</span> <span class="token keyword">as</span> BaseComponent<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">DatePicker</span> <span class="token keyword">extends</span> <span class="token class-name">BaseComponent</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 获取组件的 root selector</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">selector</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string single-quoted-string">'.date-picker'</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 浏览器包含组件的断言</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span>  <span class="token class-name">Browser</span>  <span class="token parameter">$browser</span></span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">assert</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVisible</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">selector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 读取组件的元素快捷方式</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">array</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">elements</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'@date-field'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'input.datepicker-input'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'@month-list'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'div > div.datepicker-months'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'@day-list'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'div > div.datepicker-days'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 选择给定日期</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span>  <span class="token class-name"><span class="token punctuation">\</span>Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span>  <span class="token parameter">$browser</span></span>
<span class="line">     * <span class="token keyword">@param</span>  <span class="token class-name"><span class="token keyword">int</span></span>  <span class="token parameter">$month</span></span>
<span class="line">     * <span class="token keyword">@param</span>  <span class="token class-name"><span class="token keyword">int</span></span>  <span class="token parameter">$day</span></span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">selectDate</span><span class="token punctuation">(</span><span class="token variable">$browser</span><span class="token punctuation">,</span> <span class="token variable">$month</span><span class="token punctuation">,</span> <span class="token variable">$day</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@date-field'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">within</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@month-list'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$month</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token variable">$month</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">within</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@day-list'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$day</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token variable">$day</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件的使用" tabindex="-1"><a class="header-anchor" href="#组件的使用"><span>组件的使用</span></a></h3>
<p>组件定义一旦完成，在任何测试页面的日期选择器中选定一个日期就很轻松了。并且，如果需要修改选定日期的逻辑，仅修改该组件即可：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>DuskTestCase</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Components<span class="token punctuation">\</span>DatePicker</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Testing<span class="token punctuation">\</span>DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ExampleTest</span> <span class="token keyword">extends</span> <span class="token class-name">DuskTestCase</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 基本的组件测试示例</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">testBasicExample</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">within</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">DatePicker</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">selectDate</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2018</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'January'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="持续集成" tabindex="-1"><a class="header-anchor" href="#持续集成"><span>持续集成</span></a></h2>
<h3 id="circleci" tabindex="-1"><a class="header-anchor" href="#circleci"><span>CircleCI</span></a></h3>
<p>如果使用 CircleCI 运行 Dusk 测试，则可以参考此配置文件作为起点。与 TravisCI 一样，我们将使用 <code v-pre>php artisan serve</code> 命令启动 PHP 的内置 Web 服务器：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">version<span class="token punctuation">:</span> <span class="token number">2</span></span>
<span class="line">jobs<span class="token punctuation">:</span></span>
<span class="line">    build<span class="token punctuation">:</span></span>
<span class="line">        steps<span class="token punctuation">:</span></span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span> sudo apt<span class="token operator">-</span>get install <span class="token operator">-</span>y libsqlite3<span class="token operator">-</span>dev</span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span> cp <span class="token operator">.</span>env<span class="token operator">.</span>testing <span class="token operator">.</span>env</span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span> composer install <span class="token operator">-</span>n <span class="token operator">--</span>ignore<span class="token operator">-</span>platform<span class="token operator">-</span>reqs</span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span> npm install</span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span> npm run production</span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span> vendor<span class="token operator">/</span>bin<span class="token operator">/</span>phpunit</span>
<span class="line"></span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span></span>
<span class="line">                name<span class="token punctuation">:</span> Start Chrome Driver</span>
<span class="line">                command<span class="token punctuation">:</span> <span class="token operator">.</span><span class="token operator">/</span>vendor<span class="token operator">/</span>laravel<span class="token operator">/</span>dusk<span class="token operator">/</span>bin<span class="token operator">/</span>chromedriver<span class="token operator">-</span>linux</span>
<span class="line">                background<span class="token punctuation">:</span> <span class="token constant boolean">true</span></span>
<span class="line"></span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span></span>
<span class="line">                name<span class="token punctuation">:</span> Run Laravel Server</span>
<span class="line">                command<span class="token punctuation">:</span> php artisan serve</span>
<span class="line">                background<span class="token punctuation">:</span> <span class="token constant boolean">true</span></span>
<span class="line"></span>
<span class="line">            <span class="token operator">-</span> run<span class="token punctuation">:</span></span>
<span class="line">                name<span class="token punctuation">:</span> Run Laravel Dusk Tests</span>
<span class="line">                command<span class="token punctuation">:</span> php artisan dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="codeship" tabindex="-1"><a class="header-anchor" href="#codeship"><span>Codeship</span></a></h3>
<p>在 <a href="https://codeship.com/" target="_blank" rel="noopener noreferrer">Codeship</a>中运行 Dusk 测试，需要在你的 Codeship 项目中添加以下命令。当然，这些命令只是作为范例，你可以根据需要随意添加额外的命令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">phpenv local <span class="token number">7.2</span></span>
<span class="line">cp <span class="token operator">.</span>env<span class="token operator">.</span>testing <span class="token operator">.</span>env</span>
<span class="line">mkdir <span class="token operator">-</span>p <span class="token operator">.</span><span class="token operator">/</span>bootstrap<span class="token operator">/</span>cache</span>
<span class="line">composer install <span class="token operator">--</span>no<span class="token operator">-</span>interaction <span class="token operator">--</span>prefer<span class="token operator">-</span>dist</span>
<span class="line">php artisan key<span class="token punctuation">:</span>generate</span>
<span class="line">nohup bash <span class="token operator">-</span>c <span class="token string double-quoted-string">"php artisan serve 2>&amp;1 &amp;"</span> <span class="token operator">&amp;&amp;</span> sleep <span class="token number">5</span></span>
<span class="line">php artisan dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="heroku-ci" tabindex="-1"><a class="header-anchor" href="#heroku-ci"><span>Heroku CI</span></a></h3>
<p>在 <a href="https://www.heroku.com/continuous-integration" target="_blank" rel="noopener noreferrer">Heroku CI</a> 中运行 Dusk 测试时，请将下列 Google Chrome 构建包和脚本添加到你的 Heroku <code v-pre>app.json</code> 文件中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line">  <span class="token string double-quoted-string">"environments"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token string double-quoted-string">"test"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">      <span class="token string double-quoted-string">"buildpacks"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token punctuation">{</span> <span class="token string double-quoted-string">"url"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"heroku/php"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span> <span class="token string double-quoted-string">"url"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"https://github.com/heroku/heroku-buildpack-google-chrome"</span> <span class="token punctuation">}</span></span>
<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">      <span class="token string double-quoted-string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token string double-quoted-string">"test-setup"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"cp .env.testing .env"</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string double-quoted-string">"test"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux > /dev/null 2>&amp;1 &amp;' &amp;&amp; nohup bash -c 'php artisan serve > /dev/null 2>&amp;1 &amp;' &amp;&amp; php artisan dusk"</span></span>
<span class="line">      <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line">  <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="travis-ci" tabindex="-1"><a class="header-anchor" href="#travis-ci"><span>Travis CI</span></a></h3>
<p>在 <a href="https://travis-ci.org/" target="_blank" rel="noopener noreferrer">Travis CI</a> 中运行 Dusk 测试时，您可以参考 <code v-pre>.travis.yml</code> 的配置。由于 Travis CI 并不是一个图形化的环境，我们还需要一些额外的操作步骤以便启动 Chrome 浏览器。 此外，我们将会使用 <code v-pre>php artisan serve</code> 来启动 PHP 自带的 Web 服务器：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">language<span class="token punctuation">:</span> php</span>
<span class="line"></span>
<span class="line">php<span class="token punctuation">:</span></span>
<span class="line">  <span class="token operator">-</span> <span class="token number">7.3</span></span>
<span class="line"></span>
<span class="line">addons<span class="token punctuation">:</span></span>
<span class="line">  chrome<span class="token punctuation">:</span> stable</span>
<span class="line"></span>
<span class="line">install<span class="token punctuation">:</span></span>
<span class="line">  <span class="token operator">-</span> cp <span class="token operator">.</span>env<span class="token operator">.</span>testing <span class="token operator">.</span>env</span>
<span class="line">  <span class="token operator">-</span> travis_retry composer install <span class="token operator">--</span>no<span class="token operator">-</span>interaction <span class="token operator">--</span>prefer<span class="token operator">-</span>dist <span class="token operator">--</span>no<span class="token operator">-</span>suggest</span>
<span class="line">  <span class="token operator">-</span> php artisan key<span class="token punctuation">:</span>generate</span>
<span class="line"></span>
<span class="line">before_script<span class="token punctuation">:</span></span>
<span class="line">  <span class="token operator">-</span> google<span class="token operator">-</span>chrome<span class="token operator">-</span>stable <span class="token operator">--</span>headless <span class="token operator">--</span>disable<span class="token operator">-</span>gpu <span class="token operator">--</span>remote<span class="token operator">-</span>debugging<span class="token operator">-</span>port<span class="token operator">=</span><span class="token number">9222</span> http<span class="token punctuation">:</span><span class="token comment">//localhost &amp;</span></span>
<span class="line">  <span class="token operator">-</span> php artisan serve <span class="token operator">&amp;</span></span>
<span class="line"></span>
<span class="line">script<span class="token punctuation">:</span></span>
<span class="line">  <span class="token operator">-</span> php artisan dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="github-actions" tabindex="-1"><a class="header-anchor" href="#github-actions"><span>GitHub Actions</span></a></h3>
<p>如果您使用 <a href="https://github.com/features/actions" target="_blank" rel="noopener noreferrer">Github Actions</a> 来运行 Dusk 测试时，则可以使用此配置文件作为配置起点。像 TravisCI 一样。我们将使用 <code v-pre>php artisan serve</code> 命令来启动 PHP 的 Web 服务器。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">name<span class="token punctuation">:</span> <span class="token constant">CI</span></span>
<span class="line">on<span class="token punctuation">:</span> <span class="token punctuation">[</span>push<span class="token punctuation">]</span></span>
<span class="line">jobs<span class="token punctuation">:</span></span>
<span class="line"></span>
<span class="line">  dusk<span class="token operator">-</span>php<span class="token punctuation">:</span></span>
<span class="line">    runs<span class="token operator">-</span>on<span class="token punctuation">:</span> ubuntu<span class="token operator">-</span>latest</span>
<span class="line">    steps<span class="token punctuation">:</span></span>
<span class="line">      <span class="token operator">-</span> uses<span class="token punctuation">:</span> actions<span class="token operator">/</span>checkout@v1</span>
<span class="line">      <span class="token operator">-</span> name<span class="token punctuation">:</span> Prepare The Environment</span>
<span class="line">        run<span class="token punctuation">:</span> cp <span class="token operator">.</span>env<span class="token operator">.</span>example <span class="token operator">.</span>env</span>
<span class="line">      <span class="token operator">-</span> name<span class="token punctuation">:</span> Install Composer Dependencies</span>
<span class="line">        run<span class="token punctuation">:</span> composer install <span class="token operator">--</span>no<span class="token operator">-</span>progress <span class="token operator">--</span>no<span class="token operator">-</span>suggest <span class="token operator">--</span>prefer<span class="token operator">-</span>dist <span class="token operator">--</span>optimize<span class="token operator">-</span>autoloader</span>
<span class="line">      <span class="token operator">-</span> name<span class="token punctuation">:</span> Generate Application Key</span>
<span class="line">        run<span class="token punctuation">:</span> php artisan key<span class="token punctuation">:</span>generate</span>
<span class="line">      <span class="token operator">-</span> name<span class="token punctuation">:</span> Upgrade Chrome Driver</span>
<span class="line">        run<span class="token punctuation">:</span> php artisan dusk<span class="token punctuation">:</span>chrome<span class="token operator">-</span>driver</span>
<span class="line">      <span class="token operator">-</span> name<span class="token punctuation">:</span> Start Chrome Driver</span>
<span class="line">        run<span class="token punctuation">:</span> <span class="token operator">.</span><span class="token operator">/</span>vendor<span class="token operator">/</span>laravel<span class="token operator">/</span>dusk<span class="token operator">/</span>bin<span class="token operator">/</span>chromedriver<span class="token operator">-</span>linux <span class="token operator">></span> <span class="token operator">/</span>dev<span class="token operator">/</span><span class="token constant">null</span> <span class="token number">2</span><span class="token operator">></span><span class="token operator">&amp;</span><span class="token number">1</span> <span class="token operator">&amp;</span></span>
<span class="line">      <span class="token operator">-</span> name<span class="token punctuation">:</span> Run Laravel Server</span>
<span class="line">        run<span class="token punctuation">:</span> php artisan serve <span class="token operator">></span> <span class="token operator">/</span>dev<span class="token operator">/</span><span class="token constant">null</span> <span class="token number">2</span><span class="token operator">></span><span class="token operator">&amp;</span><span class="token number">1</span> <span class="token operator">&amp;</span></span>
<span class="line">      <span class="token operator">-</span> name<span class="token punctuation">:</span> Run Dusk Tests</span>
<span class="line">        run<span class="token punctuation">:</span> php artisan dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在 <code v-pre>.env.testing</code> 文件中，调整 <code v-pre>APP_URL</code> 的配置：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token constant">APP_URL</span><span class="token operator">=</span>http<span class="token punctuation">:</span><span class="token comment">//127.0.0.1:8000</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/6.x/dusk/5188" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/6.x/dus...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/6.x/dusk/5188" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/6.x/dus...</a></p>
</blockquote>
</div></template>


